<template>
  <div id="aCoursesList" class="bg-fa of">
    <section class="container">
      <el-row class="publish_btn">
        <el-button type="primary" @click="create_content">发布文章</el-button>
      </el-row>
      <el-form>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="标题" label-width="40px">
              <el-input v-model="query_obj.title_contains" placeholder="输入关键字" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="大学标签" label-width="80px">
              <el-select v-model="query_obj.university_label_ids" filterable placeholder="搜索或选择" multiple clearable>
                <el-option
                  v-for="item in university_labels"
                  :key="item.id"
                  :label="item.university_name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="运动标签" label-width="80px">
              <el-select v-model="query_obj.sport_label_ids" filterable placeholder="搜索或选择" multiple clearable>
                <el-option
                  v-for="item in sport_labels"
                  :key="item.id"
                  :label="item.sport_name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <el-button @click="get_contents">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <section>
        <div class="mt40">
          <section class="no-data-wrap" v-if="content_data.total === 0">
            <em class="icon30 no-data-ico">&nbsp;</em>
            <span class="c-666 fsize14 ml10 vam"
            >没有相关数据，小编正在努力整理中...</span
            >
          </section>
          <article class="comm-course-list">
            <ul class="of" id="bna">
              <li v-for="content in content_data.contents" :key="content.id">
                <div class="cc-l-wrap">
                  <section class="course-img">
                    <img
                      :src="content.cover"
                      class="img-responsive"
                      :alt="content.title"
                      style="height: 150px; width: 267px"
                    />
                    <div class="cc-mask">
                      <a
                        :href="'/article/' + content.id"
                        title="文章详情"
                        class="comm-btn c-btn-1"
                      >文章详情</a
                      >
                    </div>
                  </section>
                  <h3 class="hLh30 txtOf mt10">
                    <a
                      :href="'/article/' + content.id"
                      :title="content.title"
                      class="course-title fsize18 c-333"
                    >{{ content.title }}</a
                    >
                  </h3>
                  <section class="mt10 hLh20 of">
                      <span class="fl jgAttr c-ccc f-fA">
                        <i class="c-999 f-fA">{{ Math.floor(Math.random() * (1000 - 1)) + 1 }}次浏览</i>
                        |
                        <i class="c-999 f-fA">{{ Math.floor(Math.random() * (1000 - 1)) + 1 }}次评论</i>
                      </span>
                  </section>
                </div>
              </li>
            </ul>
            <div class="clear"></div>
          </article>
        </div>
        <div class="paging">
          <el-pagination background layout="prev, pager, next" :total="content_data.total"
                         :current-page="query_obj.page_no" :page-size="query_obj.page_size"
                         @current-change="goto_page"
          />
        </div>
      </section>
    </section>
  </div>
</template>
<script>
import content_api from '@/api/content'

export default {
  layout: 'base_layout',
  data () {
    return {
      content_data: {
        total: 0,
        contents: [],
      },
      query_obj: {
        title_contains: '',
        page_no: 1,
        page_size: 8,
        content_type: 1,
        sport_label_ids: [],
        university_label_ids: [],
      },
      sport_labels: [],
      university_labels: [],
    }
  },
  created () {
    this.goto_page(1)
    this.init_labels()
  },
  methods: {
    create_content () {
      window.location.href = '/publish/1'
    },
    goto_page (page) {
      this.query_obj.page_no = page
      this.get_contents()
    },
    get_contents () {
      content_api.get_contents(this.query_obj).then((response) => {
        if (response.data.success) {
          this.content_data.total = response.data.content.total
          this.content_data.contents = response.data.content.contents
        } else {
          this.$message.error('获取数据失败！')
        }
      })
    },
    init_labels () {
      content_api.get_labels().then((response) => {
        if (response.data.success) {
          this.university_labels = response.data.content.university_labels
          this.sport_labels = response.data.content.sport_labels
        } else {
          this.$message.error('获取标签失败！')
        }
      })
    },
  },
}
</script>

<style>
.publish_btn {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
